<template>
  <a-list item-layout="vertical" :grid="{ gutter: 16, md: 4 }" size="large" :pagination="pagination" :data-source="listData">
    <a-list-item slot="renderItem" key="item.title" slot-scope="item">
      <a-card hoverable>
        <img slot="cover" alt="example" :src="item['coverImage']" />
        <h2>
          <a :href="item['案例地址']">{{ item['案例名称'] }}</a>
        </h2>
        <p>
          <a-tag color="cyan">{{ item['类别'] }}</a-tag>
        </p>
      </a-card>
    </a-list-item>
  </a-list>
</template>
<script>
import axios from "axios";
import * as d3 from "d3-dsv";
const listData = [];

export default {
  data () {
    return {
      listData,
      pagination: {
        pageSize: 8
      }
    };
  },
  created: function () {
    this.getList();
  },
  methods: {
    getList: function () {
      // 获取实例引用
      var that = this;
      axios.get("data.csv").then(function (data) {
        // console.log(typeof data["data"]);
        // console.log(d3.csvParse(data["data"]));
        that.listData = d3.csvParse(data["data"]);
      });
    }
  }
};
</script>
<style>
.ant-card-cover img {
  height: 250px;
  object-fit: cover;
}
</style>
